<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<html>
<head>
<meta charset="utf-8">
<jsp:include page="/common/commonCss.jsp"></jsp:include>
<jsp:include page="/common/commonJs.jsp"></jsp:include>
<script src="${basePath}commonJs/jquery.imageScroller.js"></script>
<script language="javascript" src="${basePath }commonJs/tags/My97DatePicker/WdatePicker.js"></script>
<title>嘉童游乐中心</title>

<script type="text/javascript">
$(document).ready(function() {
	// 默认个人进出场列表
	perTab();
	
	// 列表模式绑定事件
	$("#perLi").click(function() {
		perTab();
	});
	
	// 视图模式绑定事件
	$("#partyLi").click(function() {
		partyTab();
	});
	
	//搜索按钮绑定事件
	$("#searchBtn").click(function(){
		var inTimeStart=$("#inTimeStart").val();
		var inTimeEnd=$("#inTimeEnd").val();
		if(inTimeStart>=inTimeEnd){
			alertWarning("请选择正确的时间段！");
    		return;
		}
		if($("#partyLi").hasClass("thistab_a")==true && $("#perLi").hasClass("thistab_a")==false){
			partyTab();
		} else{
			perTab();
		}
	});
	
	//子搜索按钮绑定事件
	$("#searchChildBtn").click(function(){
		var inTimeStart=$("#inTimeStart").val();
		var inTimeEnd=$("#inTimeEnd").val();
		if(inTimeStart>=inTimeEnd){
			alertWarning("请选择正确的时间段！");
    		return;
		}
		if($("#partyLi").hasClass("thistab_a")==true && $("#perLi").hasClass("thistab_a")==false){
			partyTab();
		} else{
			perTab();
		}
	});
	
	//子2搜索按钮绑定事件
	$("#searchChildBtn2").click(function(){
		var inTimeStart=$("#inTimeStart").val();
		var inTimeEnd=$("#inTimeEnd").val();
		if(inTimeStart>=inTimeEnd){
			alertWarning("请选择正确的时间段！");
    		return;
		}
		if($("#partyLi").hasClass("thistab_a")==true && $("#perLi").hasClass("thistab_a")==false){
			partyTab();
		} else{
			perTab();
		}
	});
	
});

//统计
var total=0;
var memberTotal=0;
var singleTotal=0;
var visitTotal=0;
var guaTotal=0;

//团体
var partyTotal=0;
var tuantiTotal=0;
var partyGuaTotal=0;

//个人
function perTab(){
	//清空赋值
	$("#total").text("0");
	$("#memberTotal").text("0");
	$("#singleTotal").text("0");
	$("#visitTotal").text("0");
	$("#guaTotal").text("0");
	
	$("#queryForm").attr("action","${basePath}management/site/listPerMemer.shtml");
	var form1 = $("#queryForm");
	var pagebean = new PageBean(form1);
	pagebean.setTableId("perListTable");
	pagebean.setFootId("foot1");
	pagebean.setCallback(callback);
	setPagebeanObj(pagebean);
	pagebean.doPage();
	
	//统计赋值
	$("#total").text(total);
	$("#memberTotal").text(memberTotal);
	$("#singleTotal").text(singleTotal);
	$("#visitTotal").text(visitTotal);
	$("#guaTotal").text(guaTotal);
}

function callback(data){
	//清空
	total=0;
	memberTotal=0;
	singleTotal=0;
	visitTotal=0;
	guaTotal=0;
	
	$.each(data, function(index, item) {
		//统计
		total+=1;
		var memType=parseInt(item.memType);
		if(memType=="1"){
			memberTotal+=1;
		}else if(memType=="2"){
			singleTotal+=1;
		}else{
			visitTotal+=1;
		}
		
		//var type=parseInt(item.type);
		var typeString="";
		switch(memType){
			case 1:
				typeString="会员";
			  break;
			case 2:
				typeString="单次票";
			  break;
			case 3:
				typeString="访客";
			  break;
		}
		var inTimePage="";
		if(item.inTimePage!=null){
			inTimePage=item.inTimePage;
		}
		
		//监护人
		var guaString="无";
		$.each(item.guaList, function(index2, gua) {
			//统计监护人
			total+=1;
			guaTotal+=1;
			
			var name=gua.name;
			var telNum=gua.telNum;
			if(index2==0){
				guaString=name+" "+telNum+" ";
			}else{
				guaString+=", "+name+" "+telNum+" ";
			}
		});
		
		var html= "<tr>";
		html+="<td>"+(index+1)+"</td>"+
			  "<td>"+typeString+"</td>"+
			  "<td>"+item.memName+"</td>"+
			  "<td>"+inTimePage+"</td>"+
			  "<td>"+guaString+"</td>"+
			  "</tr>";
			$("#perListTable").find("tr:eq("+index+")").after(html);
			//$("#perListTable").append(html);
	});
}

//派对/团体
function partyTab(){
	//清空赋值
	$("#total").text("0");
	$("#tuantiTotal").text("0");
	$("#partyTotal").text("0");
	$("#partyGuaTotal").text("0");
	
	$("#queryForm").attr("action","${basePath}management/site/listPartyMemer.shtml");
	var form1 = $("#queryForm");
	var pagebean = new PageBean(form1);
	pagebean.setTableId("partyListTable");
	pagebean.setFootId("foot2");
	pagebean.setCallback(callbackParty);
	setPagebeanObj(pagebean);
	pagebean.doPage();
	
	//统计赋值
	$("#total").text(total);
	$("#tuantiTotal").text(tuantiTotal);
	$("#partyTotal").text(partyTotal);
	$("#partyGuaTotal").text(partyGuaTotal);
}

function callbackParty(data){
	//清空
	total=0;
	tuantiTotal=0;
	partyTotal=0;
	partyGuaTotal=0;
	
	$.each(data, function(index, item) {
		var partyGuaCount="0";
		if(item.partyGuaCount!=null){
			partyGuaCount=item.partyGuaCount;
		}
		var inCount="0";
		if(item.inCount!=null){
			inCount=item.inCount;
		}
		
		//统计
		total+=(inCount+partyGuaCount);
		partyGuaTotal+=partyGuaCount;
		var grpFlag="派对";
		if(item.grpFlag==1){
			grpFlag="团体";
			tuantiTotal+=inCount;
		}else{
			partyTotal+=inCount;
		}
		
		var subject="";
		if(item.subject!=null){
			subject=item.subject;
		}
		var conName="";
		if(item.conName!=null){
			conName=item.conName;
		}
		var conMobile="";
		if(item.conMobile!=null){
			conMobile=item.conMobile;
		}
		var usrName="";
		if(item.usrName!=null){
			usrName=item.usrName;
		}
		/* var phone="";
		if(item.phone!=null){
			phone=item.phone;
		} */
		var resTimeS="";
		if(item.resTimeS!=null){
			resTimeS=item.resTimeS.substring(0,2)+":"+item.resTimeS.substring(2,4);
		}
		var resTimeE="";
		if(item.resTimeE!=null){
			resTimeE=item.resTimeE.substring(0,2)+":"+item.resTimeE.substring(2,4);
		}
		var html= "<tr>";
		html+="<td>"+(index+1)+"</td>"+
			  "<td>"+grpFlag+"</td>"+
			  "<td>"+subject+"</td>"+
			  "<td>"+resTimeS+"-"+resTimeE+"</td>"+
			  "<td>"+conName+" "+conMobile+"</td>"+
			  "<td>"+usrName+"</td>"+
			  "<td>"+inCount+"</td>"+
			  "<td>"+partyGuaCount+"</td>"+
			  "</tr>";
			$("#partyListTable").find("tr:eq("+index+")").after(html);
	});
}

</script>
</head>
<body class="bg">
<div class="content m_auto">
	<div class="content_l mt10">
    	<ul>
        	<shiro:hasPermission name="management/site/locPerManager.shtml?type=1">
				<li><a href="${basePath}management/site/locPerManager.shtml?type=1"><i class="nav_icon_c"></i><br>入场管理</a></li>
			</shiro:hasPermission>
        	<shiro:hasPermission name="management/site/locPerManager.shtml?type=2">
            	<li><a href="${basePath}management/site/locPerManager.shtml?type=2"><i class="nav_icon_i"></i><br>出场管理</a></li>
            </shiro:hasPermission>
            <shiro:hasPermission name="management/site/locPerMemer.shtml">
            	<li class="content_hover"><a href="${basePath}management/site/locPerMemer.shtml"><i class="nav_icon_j"></i><br>场内人员</a></li>
            </shiro:hasPermission>
        </ul>
    </div>
    <div class="content_r mt10">
    	<div class="p30">
    	<form action="${basePath}management/site/listPerMemer.shtml" id="queryForm" name="queryForm" method="post">
			<input type="hidden" name="pageSize" value="10">
			<input type="hidden" name="pageNo" value="1">
    	<div class="management_div f14">
			<dl class="fixed" style="overflow: hidden">
            	<dd><label>姓名/电话/邮箱：</label><input type="text" class="iput_t" id="condition" name="condition"></dd>
                <dd><label>入场时间:</label>
                	<div class=" uboxstyle_small">
                        <!-- <input name="inTimeStart" id="inTimeStart" class="Wdate w100" onClick="WdatePicker({skin:'whyGreen',dateFmt:'H:mm'})"> -->
                        <select name="inTimeStart" id="inTimeStart">
                            <option value="08:00" selected="selected">08:00</option>
                            <option value="08:30">08:30</option>
                            <option value="09:00">09:00</option>
                            <option value="09:30">09:30</option>
                            <option value="10:00">10:00</option>
                            <option value="10:30">10:30</option>
                            <option value="11:00">11:00</option>
                            <option value="11:30">11:30</option>
                            <option value="13:00">13:00</option>
                            <option value="13:30">13:30</option>
                            <option value="14:00">14:00</option>
                            <option value="14:30">14:30</option>
                            <option value="15:00">15:00</option>
                            <option value="15:30">15:30</option>
                            <option value="16:00">16:00</option>
                            <option value="16:30">16:30</option>
                            <option value="17:00">17:00</option>
                            <option value="17:30">17:30</option>
                            <option value="18:00">18:00</option>
                            <option value="18:30">18:30</option>
                            <option value="19:00">19:00</option>
                            <option value="19:30">19:30</option>
                            <option value="20:00">20:00</option>
                            <option value="20:30">20:30</option>
                            <option value="21:00">21:00</option>
                            <option value="21:30">21:30</option>
                            <option value="22:00">22:00</option> 
                        </select>
                   </div>
                    <span class="ml5">：</span>
                    <div class=" uboxstyle_small">
                        <!-- <input name="inTimeEnd" id="inTimeEnd" class="Wdate w100" onClick="WdatePicker({skin:'whyGreen',dateFmt:'H:mm'})"> -->
                        <select name="inTimeEnd" id="inTimeEnd">
                            <option value="08:00">08:00</option>
                            <option value="08:30">08:30</option>
                            <option value="09:00">09:00</option>
                            <option value="09:30">09:30</option>
                            <option value="10:00">10:00</option>
                            <option value="10:30">10:30</option>
                            <option value="11:00">11:00</option>
                            <option value="11:30">11:30</option>
                            <option value="13:00">13:00</option>
                            <option value="13:30">13:30</option>
                            <option value="14:00">14:00</option>
                            <option value="14:30">14:30</option>
                            <option value="15:00">15:00</option>
                            <option value="15:30">15:30</option>
                            <option value="16:00">16:00</option>
                            <option value="16:30">16:30</option>
                            <option value="17:00">17:00</option>
                            <option value="17:30">17:30</option>
                            <option value="18:00">18:00</option>
                            <option value="18:30">18:30</option>
                            <option value="19:00">19:00</option>
                            <option value="19:30">19:30</option>
                            <option value="20:00">20:00</option>
                            <option value="20:30">20:30</option>
                            <option value="21:00">21:00</option>
                            <option value="21:30">21:30</option>
                            <option value="22:00" selected="selected">22:00</option> 
                        </select>
                   </div>
                	
                </dd>
                <dd class="f16"><input type="button" class="btn ml10" value="查询" id="searchBtn"></dd>
            </dl>
            <dl><dd class="f16">场内人员共计：<span id="total"></span>  人</dd></dl>
        </div>
        
        <div class="tab_normal ">
            <ul class=" fixed" id="tab_a">
               <li id="perLi">个人</li>     
               <li id="partyLi">派对/团体</li>
            </ul>
          <ul class="fixed" id="tab_conbox_a">
          
            <li class="p10">
            <table style="width:100%;">
            <tr>
            	<td width="50%">
                	<dl class="dd_radio">
                    	<dd><input type="checkbox" class="mr5" name="typeArray" value="1" onclick="$('#searchChildBtn').click();">会员</dd>
                        <dd><input type="checkbox" class="mr5" name="typeArray" value="2" onclick="$('#searchChildBtn').click();">单次票</dd>
                        <dd><input type="checkbox" class="mr5" name="typeArray" value="3" onclick="$('#searchChildBtn').click();">访客</dd>
                        <dd style="display: none;"><input type="button" class="btn_l" value="确定" id="searchChildBtn"></dd>
                    </dl>
                </td>
                <td ><font size="+1">会员：<span id="memberTotal"></span>人 &nbsp;&nbsp;&nbsp;   单次票：<span id="singleTotal"></span>人&nbsp;&nbsp;&nbsp;   访客：<span id="visitTotal"></span>人&nbsp;&nbsp;&nbsp;   监护人：<span id="guaTotal"></span>人</font></td>
            </tr>
            </table>
                	<table class="table mt10" id="perListTable">
                    	<tr>          
                        	<th width="5%">序号</th>
                            <th width="10%">类型</th>
                            <th width="20%">儿童姓名</th>
                            <th width="20%">入场时间</th>
                            <th width="45%">监护人</th>
                        </tr>
                    </table>
                    <!---翻页-->
					<div class="page fr m10" id="foot1"></div>
                </li>
            <li class="p10">
            <table style="width:100%;">
            <tr>
            	<td width="50%">
                	<dl class="dd_radio">
                    	<dd><input type="checkbox" class="mr5" name="flagArray" value="0" onclick="$('#searchChildBtn2').click();">派对</dd>
                        <dd><input type="checkbox" class="mr5" name="flagArray" value="1" onclick="$('#searchChildBtn2').click();">团体</dd>
                        <dd style="display: none;"><input type="button" class="btn_l" value="确定" id="searchChildBtn2"></dd>
                    </dl>
                </td>
                <td ><font size="+1">派对：<span id="partyTotal"></span>人 &nbsp;&nbsp;&nbsp;   团体：<span id="tuantiTotal"></span>人 &nbsp;&nbsp;&nbsp;   监护人：<span id="partyGuaTotal"></span></font></td>
            </tr>
            </table>
                	<table class="table mt10" id="partyListTable">
                    	<tr>          
                        	<th width="7%">序号</th>
                            <th width="10%">类型</th>
                            <th width="18%">主题</th>
                            <th width="20%">持续时间</th>
                            <th width="15%">联系人</th>
                            <th width="10%">专员</th>
                            <th width="10%">场内儿童数</th>
                            <th width="10%">场内监护人数</th>
                        </tr>
                    </table>
                    <!---翻页-->
					<div class="page fr m10" id="foot2"></div>
                </li>
            </ul>
    	</div>
    	</form>
        </div>
        
        
    </div>
</div>
</body>
</html>